<template>
	<view class="content">
		<view class="header">
			<view class="header_detail">
				<view v-if="user_id ==''" class="header_photo" @tap="navigateToLogin()">
					<view class="photo_img">
						<img src="../../static/icon/smile.png">
					</view>点击登录
				</view>
				<view v-if="user_id!=''" class="header_photo user_photo">
					<view class="photo_img">
						<img :src="user_portrait">
					</view>
					<view class="user_mes">
						<span>{{user_name}} <img :src="vip_pic"></span>
						<font>当前积分:{{user_point}}</font>
					</view>
				</view>
				<view class="set">
					<img src="../../static/icon/set.png">
				</view>
			</view>
		</view>
		<view class="menu">
			<ul>
				<li>
					<navigator url="/pages/grade/grade">
						<img src="../../static/icon/record.png" alt="">
						<span>积分记录</span>
					</navigator>
				</li>
				<li>
					<img src="../../static/icon/store.png" alt="">
					<span>积分商城</span>
				</li>
				<li>
					<navigator url="/pages/signin/signin">
						<img src="../../static/icon/sign.png" alt="">
						<span>每日签到</span>
					</navigator>
					
				</li>
			</ul>
		</view>
		
		<view class="popular">
			<view class="pop_title">
				推广中心
			</view>
			<view class="watch">
				<view class="load_remain">
					<text>{{down_num}}</text>
					<span>今日下载剩余次数</span>
				</view>
				<view class="wtach_remain">
					<text>{{see_num}}</text>
					<span>今日剩余观看次数</span>
				</view>
			</view>
			
			<view class="enroll">
				<navigator v-if="user_id ==''" url="/pages/register/register">立即注册<text class="lg text-gray cuIcon-right"></text></navigator>
				<navigator v-if="user_id!=''" url="/pages/popularCenter/popularCenter">立即提升等级<text class="lg text-gray cuIcon-right"></text></navigator>
			</view>
		</view>
		
		<view class="adv">
			<view class="uni-margin-wrap">
				<swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="500" circular="true" indicator-active-color="#f2f2f2" indicator-color="rgba(255,255,255,.5)">
					<swiper-item v-for="(item,index) in ad" :key="index">
						<view class="swiper-item uni-bg-red">
							<img :src="item.img" alt="">
						</view>
					</swiper-item>
					<!-- <swiper-item>
						<view class="swiper-item uni-bg-green">
							<img src="../../static/banner.png" alt="">
						</view>
					</swiper-item> -->
					<!-- <swiper-item>
						<view class="swiper-item uni-bg-blue">
							<img src="../../static/banner.png" alt="">
						</view>
					</swiper-item> -->
				</swiper>
			</view>
		</view>
		
		<view class="help_center">
			<view class="pop_title">
				帮助中心
			</view>
			<ul>
				<li>
					<navigator url="">
							<img src="../../static/icon/convert.png" alt="">
							<span>会员兑换</span>
					</navigator>
					
				</li>
				<li>
					<img src="../../static/icon/task.png" alt="">
					<span>任务中心</span>
				</li>
				<li>
					<img src="../../static/icon/invite.png" alt="">
					<span>邀请好友</span>
				</li>
				<li>
					<img src="../../static/icon/collect.png" alt="">
					<span>我的收藏</span>
				</li>
				<li>
					<img src="../../static/icon/history.png" alt="">
					<span>观看历史</span>
				</li>
				<li>
					<img src="../../static/icon/cache.png" alt="">
					<span>缓存记录</span>
				</li>
				<li>
					<img src="../../static/icon/inform.png" alt="">
					<span>通知中心</span>
				</li>
				<li>
					<img src="../../static/icon/potato.png" alt="">
					<span>Patato交流群</span>
				</li>
				<li>
					<img src="../../static/icon/suggest.png" alt="">
					<span>建议反馈</span>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user_id:'',
				user_name:'',
				vip_pic:'',
				user_point:'',
				user_portrait:'',
				down_num:'',
				see_num:'',
				ad:[]
			}
		},
		onLoad() {
			let user_mes = uni.getStorageSync('user_info');
			// console.log(user_mes);
			this.user_id = user_mes.user_id;
			if(user_mes ==""){
				let hash = uni.getStorageSync('vi_hash').hash;
				uni.request({
					url:'http://221.234.36.126:82/api.php/User/index',
					method:'POST',
					data:{
						token: '1CECE2221211DDCB613882C3311EC670',
						hash:hash
					},
					success: (res) => {
						
					}
				})
			}
			if(user_mes != ''){
				let user_id = user_mes.user_id;
				uni.request({
					url:'http://221.234.36.126:82/api.php/User/index',
					method:'POST',
					data:{
						token: '1CECE2221211DDCB613882C3311EC670',
						user_id:user_id
					},
					success: (res) => {
						console.log(res.data);
						this.user_name = res.data.data.user_name;
						this.vip_pic = res.data.data.vip_pic;
						this.user_point = res.data.data.user_points;
						this.user_portrait =res.data.data.user_portrait;
						this.down_num = res.data.data.down_num;
						this.see_num = res.data.data.see_num;
						this.ad = res.data.data.ad;
					}
				})
				
			}
			
			// console.log(user_mes);
			
		},
		methods: {
			navigateToLogin(){
				uni.navigateTo({
					url:'../login/login'
				})
			},
		}
	}
</script>

<style>
	
	.content{
		background-color: #eeeeee;
		padding-bottom: 30rpx;
	}
	
	.header{
		width: 100%;
		height: 265rpx;
		background:linear-gradient(0deg,rgba(3,209,255,1) 0%,rgba(0,167,255,1) 100%);
		padding-top: 80rpx;
	}
	
	.header_detail{
		width: 100%;
		height: 102rpx;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 30rpx;
	}
	
	.header_photo{
		height: 102rpx;
		display: flex;
		align-items: center;
		color: #ffffff;
		font-size: 32rpx;
	}
	
	.photo_img{
		width: 102rpx;
		height: 102rpx;
		border-radius: 50%;
		background-color: #F3F3F3;
		margin-right: 28rpx;
		overflow: hidden;
	}
	
	.photo_img img{
		display: block;
		width: 66rpx;
		height: 66rpx;
		margin: 0 auto;
		margin-top: 18rpx;
	}
	.user_photo .photo_img img{
		display: block;
		width: 102rpx;
		height: 102rpx;
		margin: 0;
	}
	
	.user_photo .user_mes span{
		display: block;
		font-size: 44rpx;
	}
	
	.user_photo .user_mes span img{
		width: 30rpx;
		height: 23rpx;
		margin-left: 10rpx;
	}
	
	.user_photo .user_mes font{
		display: block;
		font-size: 28rpx;
		margin-top: 10rpx;
	}
	
	
	.set img{
		display: block;
		width: 38rpx;
		height: 38rpx;
	}
	
	.menu{
		width: 690rpx;
		height: 217rpx;
		margin: 0 auto;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding-top: 55rpx;
		position: relative;
		top: -40rpx;
		color: #666666;
	}
	
	.menu ul{
		width: 100%;
		display: flex;
		
	}
	
	.menu ul li{
		width: 33.33%;
	}
	
	.menu ul li img{
		display: block;
		width: 48rpx;
		height: 50rpx;
		margin: 0 auto;
	}
	
	.menu ul li span{
		display: block;
		width: 100%;
		text-align: center;
		font-size: 24rpx;
		margin-top: 24rpx;
	}
	
	.popular{
		width: 690rpx;
		height: 338rpx;
		background-color: #FFFFFF;
		margin: 0 auto;
		border-radius: 10rpx;
	}
	
	.pop_title{
		width: 100%;
		height: 94rpx;
		line-height: 93rpx;
		border-bottom: #D1D1D1 1px solid;
		padding-left: 30rpx;
		font-size: 34rpx;
	}
	
	.watch{
		width: 100%;
		display: flex;
		box-sizing: border-box;
		padding: 0 30rpx;
		justify-content: space-between;
	}
	
	.watch view{
		text-align: center;
		margin-top: 40rpx;
	}
	
	.watch>view>text{
		display: block;
		font-size: 40rpx;
	}
	
	.watch>view>span{
		display: block;
		font-size: 24rpx;
		margin-top: 18rpx;
	}
	
	.enroll{
		width: 100%;
		text-align: center;
		color: #00A8FF;
		font-size: 32rpx;
		margin-top: 50rpx;
	}
	
	.enroll text{
		color: #00A8FF;
		font-size: 32rpx;
	}
	
	.adv{
		width: 690rpx;
		margin: 0 auto;
		height: 138rpx;
		margin-top: 30rpx;
		border-radius: 10rpx;
	}
	
	.uni-margin-wrap{
		width: 100%;
		height: 100%;
	}
	
	.swiper{
		height: 100%;
		
	}
	
	.swiper-item{
		border-radius: 10rpx;
	}
	
	.swiper-item img{
		display: block;
		width: 100%;
		height: 100%;
	}
	
	.help_center{
		width: 690rpx;
		margin: 0 auto;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 30rpx;
		
	}
	
	.help_center ul{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	
	.help_center ul li{
		width: 33.33%;
		padding: 57rpx 0;
	}
	
	.help_center ul li span{
		display: block;
		width: 100%;
		text-align: center;
		font-size: 26rpx;
		color: #666666;
		margin-top: 23rpx;
	}
	
	.help_center ul li img{
		display: block;
		width: 50rpx;
		height: 50rpx;
		margin: 0 auto;
	}
	
</style>
